<template>
  <div class="box">
    <div class="shurukuang">
      <input
        type="text"
        class="input"
        placeholder="请输入客户名称"
        v-model="kehumingcheng"
      />
      <input
        type="text"
        class="input"
        placeholder="手机号码"
        v-model="shoujihao"
      />
      <div class="xuanzekuang">
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
          placeholder="请选择线索分配"
        ></el-cascader>
      </div>
      <div class="caxun" @click="caxun">查询</div>
      <div class="chongzhi" @click="chongzhi">重置</div>
    </div>
    <div class="xiansuo">
      <div class="xianshuo-left">
        <router-link to="/tianjia" class="a tianjia">添加线索</router-link>
        <span @click="tanchuang('组件')" class="a daoru">导入线索</span>
        <TanChuangVue v-if="Visiable" ref="dialog" />
        <span class="a daochu">导出线索</span>
      </div>
      <div class="piliang">
        <span class="a fenpei" type="text" size="medium" @click="tanchuang2"
          >批量分配</span
        >
        <el-button
          class="a shanchu"
          size="small"
          type="yangshi"
          @click="batchDelete"
          >批量删除</el-button
        >
      </div>
    </div>
    <div class="xianshuo-list">
      <el-table
        :cell-style="setCellColor"
        size="medium"
        ref="multipleTable"
        :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ color: '#000', background: '#fafafa' }"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="客户名称"
          width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          label="客户标签"
          width="150"
          :show-overflow-tooltip="true"
        >
          <template slot="header">
            客户标签 <img src="../../assets/u266.png" alt="" class="img" />
          </template>
          <template slot-scope="scope">
            {{ scope.row.dynamicTags.join(",") }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <input
              type="text"
              v-model="scope.row.shoujihao"
              v-show="scope.row.iseditor"
              class="xiugaibianji"
            />
            <span v-show="!scope.row.iseditor">{{ scope.row.shoujihao }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="xiansuolaiyuan"
          label="线索来源"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.xiansuolaiyuan }}
          </template>
        </el-table-column>
        <el-table-column
          prop="yixiangchexing"
          label="意向车型"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <input
              type="text"
              v-model="scope.row.yixiangchexing"
              v-show="scope.row.iseditor"
              class="xiugaibianji"
            />
            <span v-show="!scope.row.iseditor">{{
              scope.row.yixiangchexing
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="genjinren"
          label="跟进人"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.genjinren }}
          </template>
        </el-table-column>
        <el-table-column
          prop="xiansuozhuangkuang"
          label="线索状况"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.genjinren !== ""
                ? "已分配"
                : scope.row.xiansuozhuangkuang
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="xiansuoguanbiyuanyin"
          label="线索关闭原因"
          show-overflow-tooltip
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.xiansuoguanbiyuanyin }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="handleEdit(scope.row.id, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="tanchuang1(scope.row.id, scope.row)"
              >{{
                scope.row.genjinren == "" ? "分配" : "转换",
              }}</el-button
            >
            <!-- <TanChuangZhuanHuan v-if="Visiable1" ref="dialog1"></TanChuangZhuanHuan> -->
            <el-button type="text" size="medium"
              ><el-button type="text" @click="open(scope.row.id)"
                >删除</el-button
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenyieqi">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currpage"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="pagesize"
        :background="true"
        :pager-count="pagesize"
        layout="->, prev, pager, next,sizes, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { getClueList, deleteChaClueList } from "@/api/index";
// import TanChuangZhuanHuan from "./clue/TanChuangZhuanHuan.vue";
import TanChuangVue from "./clue/TanChuang.vue";
import axios from "axios";
// import axios from "axios";
export default {
  name: "clueView",
  components: {
    TanChuangVue,
    // TanChuangZhuanHuan
  },
  data() {
    return {
      Visiable: false,
      Visiable1: false,
      value: [],
      options: [
        {
          value: "已分配",
          label: "已分配",
        },
        {
          value: "待分配",
          label: "待分配",
        },
        {
          value: "已跟进",
          label: "已跟进",
        },
        {
          value: "待跟进",
          label: "待跟进",
        },
      ],
      tableData: [],
      currentPage1: 1,
      pagesize: 5,
      currpage: 1,
      multipleSelection: [],
      kehumingcheng: "",
      shoujihao: "",
    };
  },
  methods: {
    //批量分配
    tanchuang2() {
      if (this.multipleSelection.length == 0) {
        alert("请选择至少一个客户");
      } else {
        this.$prompt("选择跟进人", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (value == null) {
            value = "";
            console.log(value);
            this.multipleSelection.forEach((row) => {
              axios
                .put(`http://localhost:3000/clueList/${row.id}`, {
                  name: row.name,
                  region: row.region,
                  xiansuolaiyuan: row.xiansuolaiyuan,
                  yixiangchexing: row.yixiangchexing,
                  type: row.type,
                  genjinren: value,
                  xiansuozhuangkuang: row.xiansuozhuangkuang,
                  beizhu: row.beizhu,
                  delivery: row.delivery,
                  dynamicTags: row.dynamicTags,
                  inputVisible: row.inputVisible,
                  inputValue: row.inputValue,
                  xiansuoguanbiyuanyin: row.xiansuoguanbiyuanyin,
                  shoujihao: row.shoujihao,
                  weixinhao: row.weixinhao,
                  genjinzhuangtai: row.genjinzhuangtai,
                  id: row.id,
                })
                .then(() => {
                  getClueList().then((item) => {
                    this.tableData = item.data;
                  });
                });
            });
          } else {
            console.log(value);
            this.multipleSelection.forEach((row) => {
              axios
                .put(`http://localhost:3000/clueList/${row.id}`, {
                  name: row.name,
                  region: row.region,
                  xiansuolaiyuan: row.xiansuolaiyuan,
                  yixiangchexing: row.yixiangchexing,
                  type: row.type,
                  genjinren: value,
                  xiansuozhuangkuang: row.xiansuozhuangkuang,
                  beizhu: row.beizhu,
                  delivery: row.delivery,
                  dynamicTags: row.dynamicTags,
                  inputVisible: row.inputVisible,
                  inputValue: row.inputValue,
                  xiansuoguanbiyuanyin: row.xiansuoguanbiyuanyin,
                  shoujihao: row.shoujihao,
                  weixinhao: row.weixinhao,
                  genjinzhuangtai: row.genjinzhuangtai,
                  id: row.id,
                })
                .then(() => {
                  getClueList().then((item) => {
                    this.tableData = item.data;
                  });
                });
            });
          }
        });
      }
    },
    // 转换弹窗
    tanchuang1(id, row) {
      // console.log(id, row.genjinren);
      this.value2 = row.genjinren;
      this.$prompt("选择跟进人", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: this.value2,
      })
        .then(({ value }) => {
          row.genjinren = value;
          axios
            .put(`http://localhost:3000/clueList/${id}`, {
              name: row.name,
              region: row.region,
              xiansuolaiyuan: row.xiansuolaiyuan,
              yixiangchexing: row.yixiangchexing,
              type: row.type,
              genjinren: value,
              xiansuozhuangkuang: row.xiansuozhuangkuang,
              beizhu: row.beizhu,
              delivery: row.delivery,
              dynamicTags: row.dynamicTags,
              inputVisible: row.inputVisible,
              inputValue: row.inputValue,
              xiansuoguanbiyuanyin: row.xiansuoguanbiyuanyin,
              shoujihao: row.shoujihao,
              weixinhao: row.weixinhao,
              genjinzhuangtai: row.genjinzhuangtai,
              id: row.id,
            })
            .then((res) => {
              console.log(res);
            });
          this.$message({
            type: "success",
            message: "更改跟进人: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 查询
    caxun() {
      // console.log(this.value[0]);
      axios({
        type: "get",
        url: `http://localhost:3000/clueList?name=${this.kehumingcheng}&shoujihao=${this.shoujihao}&xiansuozhuangkuang=${this.value[0]}`,
      }).then((item) => {
        console.log(item);
        this.tableData = item.data;
      });
    },
    // 重置
    chongzhi() {
      (this.kehumingcheng = ""), (this.shoujihao = ""), (this.value = "");
      getClueList().then((item) => {
        this.tableData = item.data;
      });
    },
    tanchuang(data) {
      this.Visiable = true;
      this.$nextTick(() => {
        this.$refs.dialog.init(data);
      });
    },

    handleChange(value) {
      console.log(value);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑
    handleEdit(id, row) {
      this.$router.push(`/bianji?id=${id}`);
      console.log(id, row);
      getClueList();
    },
    // handleFenPei(index, row) {
    //   console.log(index, row);
    // },
    // 批量删除
    batchDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.multipleSelection.forEach((item) => {
            console.log(item);
            deleteChaClueList(item.id);
            this.tableData = this.tableData.filter((i) => {
              return i.id != item.id;
            });
          });
          getClueList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 单个删除
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteChaClueList(id);
          setTimeout(() => {
            getClueList().then((item) => {
              console.log(item);
              this.tableData = item.data;
            });
          }, 10);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currpage = val;
    },
    setCellColor({ columnIndex }) {
      if (columnIndex === 1) {
        return "color:#239ce6;";
      }
    },
  },

  mounted() {
    setTimeout(() => {
      getClueList().then((item) => {
        this.tableData = item.data;
      });
    }, 1);

    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳至";
  },
};
</script>

<style scoped>
.box {
  width: 90%;
  margin: auto;
  padding: 30px;
  padding-right: 50px;
  background-color: #fff;
  line-height: 0;
}

/* 输入框 */
.shurukuang {
  display: flex;
  /* justify-items: center; */
  /* align-content: center; */
  align-items: center;
}

.input {
  width: 200px;
  height: 40px;
  border: 1px #dcdfe6 solid;
  /* padding: 3px; */
  box-sizing: border-box;
  padding: 0 15px;
  margin-right: 20px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  /* outline: none; */
  outline-color: #409eff;
}

.input::-webkit-input-placeholder {
  color: #c0c4cc;
}

.xuanzekuang {
  height: 100px;
  display: flex;
  align-items: center;
}

.caxun,
.chongzhi {
  width: 100px;
  height: 40px;
  background-color: #409eff;
  border-radius: 4px;
  margin-left: 20px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}

.chongzhi {
  background-color: #fff;
  color: #000;
  border: #999 solid 1px;
  box-sizing: border-box;
}

/* 添加线索，导入线索... */
a {
  text-decoration: none;
}

.xiansuo {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.a {
  font-size: 18px;
  color: #409eff;
  margin-right: 20px;
}

.el-button--yangshi {
  border: none;
  color: #409eff;
}

.daoru::after,
.tianjia::after,
.fenpei::after {
  content: "";
  display: inline-block;
  height: 18px;
  border-left: #409eff 2px solid;
  transform: translate(10px, 3px);
}

.img {
  margin-left: 10px;
}

/* 分页器 */
.fenyieqi {
  margin-top: 50px;
}

.xiugaibianji {
  outline: none;
  width: 100px;
  height: 20px;
  border: 1px #999 solid;
}
</style>